<template>
  <div>
    <Card>
      <Button type="primary" @click="addUser">添加用户</Button>&ensp;
      <Button type="error" @click="deleteAll">批量删除</Button>&ensp;
      <Button type="info">批量导入</Button>&ensp;
      <Button type="success" @click="exportExcel">导出为Csv文件</Button>
      <span style="float: right;clear:both;color: #2d8cf0">
      <i-switch v-model="hideDelete" size="large" @on-change="showDelete"/>
          显示删除用户
      </span>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" stripe :loading="loading"
              :columns="columns"
              context-menu
              show-context-menu
              @on-contextmenu="handleContextMenu"
              @on-delete="handleDelete">
        <template slot="contextMenu">
          <DropdownItem>编辑</DropdownItem>
          <DropdownItem style="color: #ed4014">删除</DropdownItem>
        </template>
      </tables>
      <div style="text-align: right;margin-top: 10px">
        <Page :total="dataSize"
              :page-size="pageSize"
              :current="pageIndex"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-total
              show-elevator
              show-sizer/>
      </div>
      <AddUser ref="add" @refresh="getData()"></AddUser>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import AddUser from "@/view/admin/system/AddUser";
import {getUserTableData, getImgUrl, deleteUserData, getRoleTableData, getUserTableDataByPageAndSize} from '@/api/data'
import AddRole from "@/view/admin/system/AddRole";
import {Col, Row} from "iview";

export default {
  name: "User",
  components: {
    AddUser,
    Tables
  },
  data() {
    return {
      showDeleteData: [],
      hiddenDeleteData: [],
      hideDelete: false,
      loading: true,
      pageIndex: 1,
      pageSize: 10,
      dataSize: 0,
      roleList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          search: false
        },
        {
          title: '头像', key: 'icon', sortable: false, search: false, width: 70,
          render: (h, params) => {
            let icon = 'ios-person';
            let row = params.row;
            return h('Avatar', {
              props: {
                icon: icon,
                src: `http://localhost:8820/api/api/img/index/${row.id}.jpg`
              },
              on: {
                error: function () {
                  console.log(11111)
                }
              }
            });
          }
        },
        {title: '用户名', key: 'username', sortable: true, width: 100},
        {title: '手机号', key: 'phone', editable: true, width: 180,},
        {title: '创建时间', key: 'createTime', width: 180},
        {
          title: '修改时间',
          key: 'updateTime',
          width: 180
        },
        {
          title: '状态', key: 'status', sortable: false,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          }
        },
        //{title: '登录时间', key: 'lastLoginTime', sortable: false,width: 160},
        {title: '登录次数', key: 'count', sortable: false, search: false},
        {
          title: '操作',
          key: 'id',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateUser(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: params.row.status.toUpperCase()==='DELETE'?'warning':'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    if(params.row.status.toUpperCase()==='DELETE'){
                      this.reverseUser(params)
                    }else{
                      this.deleteUser(params)
                    }
                  }
                }
              },  params.row.status.toUpperCase()==='DELETE'?'恢复':'删除')
            ]);
          }
        }
      ],
      tableData: [],
      addUsers: false,
      contextLine: 0
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    }
    ,
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    }
    ,
    addUser() {
      this.$refs.add.showThis();
    }
    ,
    deleteAll() {
      let select = this.$refs.tables.$refs.tablesMain.getSelection();
      if (!select || !select.length) {
        this.$Message.warning("你还未选择数据！");
        return;
      }
      console.log(select)
      const config = {
        icon: 'ios-delete',
        title: "批量删除用户确认",
        iconClass: 'md-alert',
        content: `
<p style="color: rgba(250,23,34,0.8)">你一共选中了<span style="color: rgba(255,0,0,1);font-weight: bold">${select.length}</span>条数据，确认删除吗?<br></p>
<span style="color: rgba(23,23,23,0.4);font-size: 14px">小提示：删除数据后可以在回收站清空或恢复数据！</span>
`,
        closable: true,
        okText: '确认删除',
        cancelText: '取消删除',
        onOk: function () {

        },
        onCancel: function () {

        },
      }
      this.$Modal.confirm(config);
    }
    ,
    getStatus(val) {
      switch (val) {
        case "Enable":
          return {code: 200, value: '启用', color: 'primary'}
        case "Disable":
          return {code: 500, value: '禁用', color: 'purple'}
        case "Delete":
          return {code: 404, value: '删除', color: 'error'}
        case "Lock":
          return {code: 400, value: '锁定', color: 'warning'}
        case "Unlock":
          return {code: 402, value: '解除锁定', color: 'blue'}
        case "NoPassWord":
          return {code: 308, value: '密码过期', color: 'red'}
        default:
          return {code: 0, value: '未知状态'}
      }
    },
    showDelete(status) {
      if (status) {
        this.tableData = this.showDeleteData;
      } else {
        this.tableData = this.hiddenDeleteData;
      }
    },
    reverseUser(params){
      let config = {
        title: "恢复用户确认",
        okText: '确认恢复',
        closable: true,
        content: `
        <p style="color: rgba(250,23,34,0.8)">你确认恢复用户名为<span style="color: rgba(255,0,0,1);font-weight: bold">${params.row.username}</span>的用户吗?<br></p>
`,
        onOk: function () {
          let index = params.index;
          //deleteUserData(this.tableData[index])
          this.tableData.splice(index, 1);
          this.showDeleteData = this.tableData;
          this.hiddenDeleteData = this.tableData.filter(o => {
            return o.status !== 'Delete';
          })
        }
      }
      this.$Modal.error(config)
    },
    deleteUser(params) {
      let config = {
        title: "删除用户确认",
        okText: '确认删除',
        closable: true,
        content: `
        <p style="color: rgba(250,23,34,0.8)">你确认删除用户名为<span style="color: rgba(255,0,0,1);font-weight: bold">${params.row.username}</span>的用户吗?<br></p>
<span style="color: rgba(23,23,23,0.4);font-size: 14px">小提示：删除数据后可以在回收站清空或恢复数据！点击右上角关闭按钮取消删除</span>
`,
        onOk: function () {
          let index = params.index;
          deleteUserData(this.tableData[index])
          this.tableData.splice(index, 1);
          this.showDeleteData = this.tableData;
          this.hiddenDeleteData = this.tableData.filter(o => {
            return o.status !== 'Delete';
          })
        }
      }
      this.$Modal.error(config)
    },
    show(index) {
      this.$Modal.info({
        width: 600,
        title: '用户详细信息',
        render: (h) => {
          let detail = this.tableData[index].userDetail;
          let roles = this.tableData[index].roles;

          function getRole() {
            let tags = [];
            let title = h('span', {
              class: 'user-info-detail-label public-label-color'
            }, '拥有角色:');
            tags.push(title);
            for (const role of roles) {
              tags.push(h('tag', {
                props: {
                  color: 'rgba(40, 178, 220, 0.8)'
                }
              }, role.roleName))
            }
            return tags;
          }

          return h('div', {
            style: {
              marginTop: '10px'
            }
          }, [
            h('Row', [
              h('h3', {
                style: {
                  color: 'rgba(35,178,250,0.9)'
                }
              }, '基本信息'),
              h('Col', {
                  props: {
                    span: 12
                  },
                },
                [
                  h('span', {
                    class: 'user-info-detail-label public-label-color'
                  }, '用户id:'),
                  h('span', {
                    class: 'public-color'
                  }, this.tableData[index].id),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label public-label-color'
                  }, '用户名:'),
                  h('span', {
                    class: 'public-color'
                  }, this.tableData[index].username),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label public-label-color'
                  }, '手机:'),
                  h('span', {
                    class: 'public-color'
                  }, this.tableData[index].phone),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label public-label-color'
                  }, '启用状态:'),
                  h('Tag', {
                    props: {
                      //type: 'dot',
                      color: this.getStatus(this.tableData[index].status).color
                    }

                  }, this.getStatus(this.tableData[index].status).value)
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label public-label-color'
                  }, '注册时间:'),
                  h('span', {
                    class: 'public-color'
                  }, this.tableData[index].createTime),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label public-label-color'
                  }, '修改时间:'),
                  h('span', {
                    class: 'public-color'
                  }, this.tableData[index].updateTime),
                ]
              ),
              h('Col', {
                props: {
                  span: 24
                }
              }, [].concat(getRole),)
            ]),
            h('Row', {
              style: {
                marginTop: '10px',
                display: detail ? 'auto' : 'none'
              }
            }, [
              h('h3', {
                style: {
                  color: 'rgba(250,12,12,0.8)'
                }
              }, '详细信息'),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '真实姓名:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.userName : ''),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '性别:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.sex ? '男' : '女' : ''),
                ]
              ),
              h('Col', {
                  props: {
                    span: 24
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '身份证号:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.idCard : ""),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '出生日期:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.birthday : ''),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, 'QQ号:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.mobileQq : ''),
                ]
              ),
              h('Col', {
                  props: {
                    span: 12
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '微信号:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.mobileWeChat : ''),
                ]
              ),
              h('Col', {
                  props: {
                    span: 24
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '支付宝账号:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.mobileAliPay : ''),
                ]
              ),
              h('Col', {
                  props: {
                    span: 24
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label important-label-color'
                  }, '银行卡号:'),
                  h('span', {
                    class: 'important-color'
                  }, detail ? detail.bankCards : ""),
                ]
              ),
            ]),
            h('Row', {
              style: {
                marginTop: '10px'
              }
            }, [
              h('h3', {
                style: {
                  color: 'rgba(243,174,70,0.7)'
                }
              }, '登录信息'),
              h('Col', {
                  props: {
                    span: 16
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label common-label-color'
                  }, '最后一次登录时间:'),
                  h('span', {
                    class: 'common-color',
                  }, this.tableData[index].lastLoginTime),
                ]
              ),
              h('Col', {
                  props: {
                    span: 8
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label common-label-color'
                  }, '登录次数:'),
                  h('span', {
                    class: 'common-color',
                  }, this.tableData[index].count),
                ]
              ),
              h('Col', {
                  props: {
                    span: 24
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label common-label-color'
                  }, '最后一次登录地址:'),
                  h('span', {
                    class: 'common-color',
                  }, this.tableData[index].lastLoginIp),
                ]
              ),
              h('Col', {
                  props: {
                    span: 24
                  }
                },
                [
                  h('span', {
                    class: 'user-info-detail-label common-label-color'
                  }, '最后一次信息:'),
                  h('span', {
                    class: 'common-color',
                  }, this.tableData[index].lastLoginClient),
                ]
              ),
            ]),
          ])
        },
      })
    },
    updateUser(param) {
      let tag = [];
      let config = {
        closable: true,
        okText: '保存',
        cancelText: '取消修改',
        title: '修改用户信息',
        render: (h) => {
          return h('div',
            [
              h('div', {}, [
                h('span', {
                  class: "user-info-detail-label"
                }, "用户名:"),
                h('span', {
                  class: "important-color"
                }, param.row.username)
              ]),
              h('div', {
                style: {
                  display: 'flex',
                  justifyContent: 'space-around',
                  marginTop: '10px',
                  marginBottom: '10px'
                }
              }, [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'large'
                  },
                  on: {
                    click: () => {
                      let status;
                      // <RadioGroup  type="button" v-model="userMode.status">
                      //   <Radio label="Enable" value="200">启用</Radio>
                      //   <Radio label="Disable" value="500">禁用</Radio>
                      //   <Radio label="Lock" value="400">锁定</Radio>
                      //   <Radio label="Unlock" value="402">解除锁定</Radio>
                      //   <Radio label="NoPassWord" value="308">密码过期</Radio>
                      // </RadioGroup>
                      config = {
                        title: '修改用户状态',
                      }
                      tag = [];
                      tag.push(h('div', {
                        style: {
                          display: 'flex',
                          justifyContent: "center"
                        }
                      }, [
                        h('RadioGroup', {
                          props: {
                            type: "button",
                          }
                        }, [
                          h('Radio', {
                            props: {
                              label: "Enable"
                            }
                          }, '启用'),
                          h('Radio', {
                            props: {
                              label: "Disable"
                            }
                          }, '禁用'),
                          h('Radio', {
                            props: {
                              label: "Lock"
                            }
                          }, '锁定'),
                          h('Radio', {
                            props: {
                              label: "Unlock"
                            }
                          }, '解除锁定'),
                          h('Radio', {
                            props: {
                              label: "NoPassWord"
                            }
                          }, '密码过期')
                        ])
                      ]))
                      this.$Modal.confirm(config)
                    }
                  }
                }, '修改用户状态'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'large'
                  },
                  on: {
                    click: () => {
                      config = {
                        title: '修改用户角色',
                      }
                      tag = [];
                      let tags = [];
                      for (const role of this.roleList) {
                        tags.push(
                          h('Checkbox', {
                            props: {
                              label: role.id,
                            }
                          }, role.roleName)
                        )
                      }
                      tag.push(h('CheckboxGroup', {
                        style: {
                          textAlign: 'center'
                        }
                      }, tags));
                      this.$Modal.confirm(config)
                    }
                  }
                }, '编辑角色'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'large'
                  },
                  on: {
                    click: () => {
                      config = {
                        title: '修改密码'
                      }
                      tag = [];

                      this.$Modal.confirm(config)
                    }
                  }
                }, '重置密码')
              ])
            ].concat(tag))
        },
        onOk: function () {

        },
        onCancel: function () {

        }
      }
      this.$Modal.confirm(
        config
      )
    },
    loadUserTableData() {
      // getUserTableData().then(res => {
      //   if (!res.data.object) {
      //     this.loading = false;
      //     return;
      //   }
      //   this.showDeleteData = res.data.object;
      //   this.hiddenDeleteData = res.data.object.filter(o => {
      //     return o.status !== 'Delete';
      //   })
      //   this.tableData = this.hiddenDeleteData;
      //   this.loading = false;
      // });
    },
    handleContextMenu(row) {
      const index = this.tableData.findIndex(item => item.name === row.name);
      this.contextLine = index + 1;
    },
    changePage(page) {
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    getData() {
      getUserTableDataByPageAndSize(this.pageIndex,this.pageSize).then(res => {
        if (!res.data.object) {
          this.loading = false;
          return;
        }
        this.showDeleteData = res.data.object.content;
        this.hiddenDeleteData = res.data.object.content.filter(o => {
          return o.status !== 'Delete';
        })
        this.tableData = this.hiddenDeleteData;
        this.dataSize = res.data.object.totalElements;
        this.loading = false;
      });
    },
    getRoles(){
      getRoleTableData().then(roles => {
        this.roleList = roles.data.object;
      });
    }
  }
  ,
  mounted() {
    this.getData()
    this.getRoles()
  }
}
</script>

<style>

.user-info-detail {

}

.user-info-detail-label {
  font-weight: bold;
  margin-right: 4px;
}

.important-color {
  color: rgba(230, 125, 124, 0.8);
}

.common-color {
  color: rgba(248, 181, 95, 0.8);
}

.public-color {
  color: rgba(40, 178, 220, 0.8);
}

.public-label-color {
  color: rgba(45, 170, 250, 1);
}

.important-label-color {
  color: rgba(240, 120, 120, 1);
}

.common-label-color {
  color: rgba(240, 180, 90, 1);
}

/*.ivu-modal-confirm-footer {*/
/*  display: none !important;*/
/*}*/
</style>
